<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div style="position: absolute; right:200px;padding:50px;border:1px solid #ccc;">
    <pre>
      1. 不做任何处理时，红色的框会实时跟着鼠标移动
      2. 防抖之后，鼠标移动时，红框不会跟随；鼠标停止移动后，红框才就位，
      3. 节流之后，红框跟随会有延迟
    </pre>
    <p><input type="radio" name="type" value="" checked>不做处理</p>
    <p><input type="radio" name="type" value="debounce">防抖 <input id="debounce" name="text" type="text" value="100">毫秒</p>
    <p><input type="radio" name="type" value="throttle">节流 <input id="throttle" name="text" type="text"value="100">毫秒</p>
  </div>
  <div id="btn" style="width: 10px;height: 10px;background-color: red;position: absolute;"></div>
  <div id="div" style="background-color: #333;width: 400px;height: 400px;">
  </div>
  <script>

    function debounceBuilder (f, t=1000)  {
      console.log('防抖'+t+'毫秒')
      let timer = null
      return function(){
        let arg = arguments
        clearTimeout(timer)
        timer = setTimeout(() => {
          f.apply(this,arg)
        }, t)
      }
    }
    
    function throttleBuilder (f, t=50) {
      console.log('节流'+t+'毫秒')
      let timer2 = null
      return function () {
        let arg = arguments
        if(timer2) {
          return
        }
        timer2 = setTimeout(() => {
          f.apply(this,arg)
          timer2 = null
        }, t)
      }
    }
    function doSomething(e){
      // console.log(this,e)
      document.getElementById('btn').style.left = e.clientX+'px'
      document.getElementById('btn').style.top = e.clientY+'px'
      console.log((new Date()).toLocaleTimeString(), (new Date()).getMilliseconds(),'响应了鼠标移动')
    }


    //取单选框选择中的值，传入单选框的name
    function  getRadioBoxValue( radioName)
    {
      var obj=document.getElementsByName(radioName);  //这个是以标签的name来取控件
      for (i=0;i<obj.length;i++) {
        if ( obj[i].checked) {
          return  obj[i].value;
        }
      }
      return  "";
    }
    function buildFunc () {
      const type = getRadioBoxValue('type')
      console.log(type)
      if(type === "throttle") {
        const t = document.getElementById('throttle').value
        document.getElementById('div').onmousemove = throttleBuilder(doSomething, t)
      } else if(type === "debounce") {
        const t = document.getElementById('debounce').value
        document.getElementById('div').onmousemove = debounceBuilder(doSomething, t)
      } else {
        document.getElementById('div').onmousemove = doSomething
      }
    }

    Array.from(document.getElementsByName('type')).forEach(item => {
      item.addEventListener('click', (e)=> {
        buildFunc()
      })
    })

    Array.from(document.getElementsByName('text')).forEach(item => {
      item.addEventListener('input', (e)=> {
        console.log('xxx')
        buildFunc()
      })
    })
    buildFunc()
</script>
</body>
</html>